import React from 'react';
import SourceBox from './SourceBox';

const types = ['View', 'Text', 'Button', 'Icon'];

export default function Left(props: any) {
  const { onEndDrag } = props;

  return (
    <div style={{ background: '#ccc' }}>
      {types.map((type, index) => {
        return (
          <SourceBox data={{ type }} key={index} onEndDrag={onEndDrag}>
            <div
              style={{
                textAlign: 'center',
                margin: 8,
                height: 50,
                background: 'blue',
                color: '#fff',
              }}
            >
              {type}
            </div>
          </SourceBox>
        );
      })}
    </div>
  );
}
